<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>演员管理</el-breadcrumb-item>
      <el-breadcrumb-item>演员列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 模糊搜索的表单 -->
    <el-form 
      @submit.native.prevent
      :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input 
          @keyup.native.enter="search"
          v-model="name" placeholder="请输入姓名关键字"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">演员列表</el-divider>

    <!-- 演员列表显示 -->
    <person v-for="item in actors" :key="item.id"
      :name="item.actor_name"
      :avatar="item.actor_avatar"></person>

  </div>
</template>

<script>
import myaxios from '@/http/MyAxios'
import Person from '@/components/Person.vue';

export default {
  components: { Person },

  data() {
    return {
      actors: [],  // 保存所有的演员列表
      name: '',    // 双向数据绑定name输入框
    }
  },

  methods: {

    /** 点击查询按钮后执行，需要判断输入框中是否有关键字 */
    search(){
      if(this.name.trim()==''){  // 没有关键字
        this.listActors()
      }else{  // 有关键字
        this.listActorsByName()
      }
    },

    /** 通过姓名关键字查询演员列表 */
    listActorsByName(){
      let url = "https://web.codeboy.com/bmdapi/movie-actors/name"
      myaxios.post(url, {name:this.name}).then(res=>{
        console.log('模糊查询的结果', res)
        this.actors = res.data.data
      })
    },

    /** 呈现演员列表 */ 
    listActors() {
      // let url = "https://web.codeboy.com/bmdapi/movie-actors"
      let url = "http://localhost:3010/movie-actors"
      myaxios.get(url, {page:1, pagesize:100}).then(res=>{
        console.log(res)
        // 将res.data.data 存入 this.actors
        this.actors = res.data.data
      })
    }
  },
  // 页面挂在完毕后，发送请求，加载列表数据
  mounted(){
    this.listActors()   // 加载演员列表
  }
};
</script>

<style lang="scss" scoped></style>
